<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://unpkg.com/vue@next"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-plus"></script>
    <title>tools</title>
    <style>
      .title {
        margin-left: 30px;
      }
      .result{
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <el-form :model="form" label-width="180px">
        <div class="title">稀释；a% * m1 + b% *m2 = c% * (m1 + m2)</div>
        <el-form-item label="已有a浓度%(高浓度)">
          <el-input v-model="form.concentrationA" />
        </el-form-item>

        <el-form-item label="已有b浓度%(低浓度)">
          <el-input v-model="form.concentrationB" />
        </el-form-item>

        <el-form-item label="获取c浓度%">
          <el-input v-model="form.concentrationC" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">计算</el-button>
        </el-form-item>
      </el-form>
      <div class="result">{{result}}</div>
      <br/>
      <br/>
      
      <el-form :model="form2" label-width="180px">
        <div class="title">加水稀释：a%*m1 / (m1 + m2) = b%</div>
        <el-form-item label="已有浓度a%">
          <el-input v-model="form2.concentrationA" />
        </el-form-item>
        <el-form-item label="质量(g)">
          <el-input v-model="form2.quality" />
        </el-form-item>
        <el-form-item label="获取浓度b%">
          <el-input v-model="form2.concentrationB" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onAddWater">计算</el-button>
        </el-form-item>
      </el-form>
      <div class="result">{{waterResult}}</div>
    </div>
  </body>
</html>

<script>
  function percent(n1, n2) {}
  function calc(a, b, c) {
    return `获取浓度为${c}%，需要 ${a}% : ${b}%  = (${a - c} : ${c - b})`;
  }

  const App = {
    data() {
      return {
        result: '',
        waterResult: '',
        form: {
          concentrationA: 10,
          concentrationB: 0.9,
          concentrationC: 5
        },
        form2: {
          concentrationA: 20,
          concentrationB: 10,
          quality: 100
        }
      };
    },
    methods: {
      onSubmit() {
        const form = this.form;
        this.result = calc(form.concentrationA, form.concentrationB, form.concentrationC);
      },
      onAddWater() {
        const form = this.form2;
        const water = (form.concentrationA * form.quality - form.concentrationB * form.quality) / form.concentrationB;
        this.waterResult = `需要加水 ${water} g`;
      }
    }
  };
  const app = Vue.createApp(App);
  app.use(ElementPlus);
  app.mount('#app');
</script>
